<template>
  <div class="income-management">
    <el-card class="header-card">
      <template #header>
        <div class="card-header">
          <span>平台收入管理</span>
        </div>
      </template>
      <div class="content">
        <el-tabs v-model="activeTab">
          <el-tab-pane label="收入统计" name="statistics">
            <div class="stat-container">
              <el-row :gutter="20">
                <el-col :span="6">
                  <el-card class="stat-card">
                    <div class="stat-item">
                      <div class="stat-value">¥1,234,567</div>
                      <div class="stat-label">本月收入</div>
                    </div>
                  </el-card>
                </el-col>
                <el-col :span="6">
                  <el-card class="stat-card">
                    <div class="stat-item">
                      <div class="stat-value">+12.5%</div>
                      <div class="stat-label">环比增长</div>
                    </div>
                  </el-card>
                </el-col>
                <el-col :span="6">
                  <el-card class="stat-card">
                    <div class="stat-item">
                      <div class="stat-value">89</div>
                      <div class="stat-label">付费租户</div>
                    </div>
                  </el-card>
                </el-col>
                <el-col :span="6">
                  <el-card class="stat-card">
                    <div class="stat-item">
                      <div class="stat-value">¥13,872</div>
                      <div class="stat-label">客单价</div>
                    </div>
                  </el-card>
                </el-col>
              </el-row>
            </div>
            
            <div class="chart-container">
              <el-card>
                <div ref="incomeChartRef" style="width: 100%; height: 400px;"></div>
              </el-card>
            </div>
          </el-tab-pane>
          
          <el-tab-pane label="客户贡献分析" name="analysis">
            <el-table :data="customerData" style="width: 100%">
              <el-table-column prop="name" label="客户名称" width="200" />
              <el-table-column prop="contribution" label="贡献金额" width="150" />
              <el-table-column prop="percentage" label="占比" width="100" />
              <el-table-column prop="trend" label="趋势">
                <template #default="scope">
                  <span :class="scope.row.trend > 0 ? 'trend-up' : 'trend-down'">
                    {{ scope.row.trend > 0 ? '↑' : '↓' }} {{ Math.abs(scope.row.trend) }}%
                  </span>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
          
          <el-tab-pane label="退款管理" name="refund">
            <div class="toolbar">
              <el-button type="primary" @click="handleProcessRefund">处理退款</el-button>
            </div>
            <el-table :data="refundData" style="width: 100%">
              <el-table-column prop="orderId" label="订单号" width="180" />
              <el-table-column prop="customer" label="客户" width="150" />
              <el-table-column prop="amount" label="退款金额" width="120" />
              <el-table-column prop="reason" label="退款原因" />
              <el-table-column prop="status" label="状态" width="100">
                <template #default="scope">
                  <el-tag :type="scope.row.status === 'pending' ? 'warning' : 'success'">
                    {{ scope.row.status === 'pending' ? '待处理' : '已处理' }}
                  </el-tag>
                </template>
              </el-table-column>
              <el-table-column label="操作" width="120">
                <template #default="scope">
                  <el-button link type="primary" @click="handleApproveRefund(scope.row)">处理</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const activeTab = ref('statistics')

// 模拟客户贡献数据
const customerData = ref([
  { name: '北京科技有限公司', contribution: '¥120,000', percentage: '9.7%', trend: 5.2 },
  { name: '上海信息技术公司', contribution: '¥98,500', percentage: '8.0%', trend: -2.1 },
  { name: '广州软件开发公司', contribution: '¥85,200', percentage: '6.9%', trend: 3.8 },
  { name: '深圳互联网公司', contribution: '¥76,800', percentage: '6.2%', trend: 1.5 },
  { name: '杭州电子商务公司', contribution: '¥65,400', percentage: '5.3%', trend: 7.3 }
])

// 模拟退款数据
const refundData = ref([
  { orderId: '20230401001', customer: '北京科技有限公司', amount: '¥5,000', reason: '服务不满意', status: 'pending' },
  { orderId: '20230402005', customer: '上海信息技术公司', amount: '¥3,200', reason: '功能不符合预期', status: 'processed' },
  { orderId: '20230403012', customer: '广州软件开发公司', amount: '¥1,800', reason: '试用期结束', status: 'pending' }
])

// 方法
const handleProcessRefund = () => {
  console.log('处理退款')
}

const handleApproveRefund = (row: any) => {
  console.log('处理退款申请', row)
}
</script>

<style scoped>
.income-management {
  padding: 20px;
}

.header-card {
  margin-bottom: 20px;
}

.card-header {
  font-size: 18px;
  font-weight: bold;
}

.stat-container {
  margin-bottom: 30px;
}

.stat-card {
  text-align: center;
}

.stat-item {
  padding: 20px 0;
}

.stat-value {
  font-size: 24px;
  font-weight: bold;
  color: #409eff;
}

.stat-label {
  font-size: 14px;
  color: #666;
  margin-top: 10px;
}

.chart-container {
  background: #fff;
  padding: 20px;
  border-radius: 4px;
  margin-top: 20px;
}

.toolbar {
  margin-bottom: 20px;
}

.trend-up {
  color: #67c23a;
}

.trend-down {
  color: #f56c6c;
}
</style>